import React, {PureComponent} from 'react';
import {Input} from 'antd';
import PropTypes from 'prop-types';
import './WrappedInputPercent.css';
import InputPercent from './InputPercent';
import WrappedInputNumber from './WrappedInputNumber';
const splitWidth = {
    width: '20%',
    borderLeft: 0,
    borderRight: 0,
    pointerEvents: 'none'
};
// eslint-disable-next-line react/prefer-stateless-function
class WrappedInputPercent extends PureComponent {
    render() {
        const {
            step, style, name, value, percent,
            onBlur, parser, onChange, precision,
            onPressEnter
        } = this.props;
        const percentparams = {
            min: 0,
            max: 10,
            step,
            style,
        };
        const numberparams = {
            min: 0,
            max: 100,
            style,
        };
        return (
            <div className="site-input-group-wrapper">
                <Input.Group compact>
                    {percent
                        ? <InputPercent
                            name={name[0]}
                            value={value[0]}
                            parser={parser}
                            onBlur={onBlur}
                            {...percentparams}
                            onChange={onChange}
                            className="site-input-left"/>
                        : <WrappedInputNumber
                            allowClear
                            name={name[0]}
                            onBlur={onBlur}
                            value={value[0]}
                            {...numberparams}
                            onChange={onChange}
                            className="site-input-left"
                            onPressEnter={onPressEnter}
                            precision={precision ? precision[0] : 0}/>}
                    <Input
                        className="site-input-split"
                        style={splitWidth}
                        placeholder="~"
                        disabled/>
                    {percent
                        ? <InputPercent
                            name={name[1]}
                            parser={parser}
                            onBlur={onBlur}
                            value={value[1]}
                            {...percentparams}
                            onChange={onChange}
                            className="site-input-right"/>
                        : <WrappedInputNumber
                            allowClear
                            {...numberparams}
                            name={name[1]}
                            onBlur={onBlur}
                            value={value[1]}
                            onChange={onChange}
                            onPressEnter={onPressEnter}
                            className="site-input-right"
                            precision={precision ? precision[1] : 0}/>}
                </Input.Group>
            </div>
        );
    }
}
WrappedInputPercent.propTypes = {
    name: PropTypes.array, /*当前属性名数组*/
    parser: PropTypes.func, /*指定从 formatter 里转换回数字的方式，和 formatter 搭配使用*/
    percent: PropTypes.bool, /*是否是百分比区间*/
    precision: PropTypes.array, /*数值精度数组*/
    step: PropTypes.number, /*每次改变步数，可以为小数*/
    style: PropTypes.object, /*样式*/
    value: PropTypes.array, /*当前值数组*/
    onBlur: PropTypes.func, /*失去焦点回调*/
    onChange: PropTypes.func, /*变化回调*/
    onPressEnter: PropTypes.func /*按下回车的回调*/
};
export default WrappedInputPercent;
